<template>
  <view class="gas-fees-page">
    <!-- 燃气费记录列表 -->
    <scroll-view 
      scroll-y="true" 
      class="fees-scroll" 
      @scrolltolower="loadMore"
      :refresher-enabled="true"
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <view class="fees-content">
        <!-- 燃气费记录卡片 -->
        <view 
          v-for="item in feesList" 
          :key="item.id"
          class="fee-card"
          @click="goToFeeDetail(item)"
        >
          <!-- 卡片头部 -->
          <view class="card-header">
            <view class="header-left">
              <text class="fee-title">{{ item.feeName || '燃气费' }}</text>
              <u-tag 
                :text="getStatusText(item.paymentStatus)" 
                :type="getStatusType(item.paymentStatus)" 
                size="mini"
                class="status-tag"
              />
            </view>
            <text class="fee-time">{{ formatTime(item.createTime) }}</text>
          </view>
          
          <!-- 卡片内容 -->
          <view class="card-content">
            <view class="content-item">
              <u-icon name="map" size="14" color="#666" class="item-icon"></u-icon>
              <text class="item-text">{{ item.householdAddress || '暂无地址信息' }}</text>
            </view>
            <view class="content-item">
              <u-icon name="calendar" size="14" color="#666" class="item-icon"></u-icon>
              <text class="item-text">{{ item.billingPeriod || '暂无计费周期' }}</text>
            </view>
            <view class="content-item">
              <u-icon name="rmb-circle" size="14" color="#666" class="item-icon"></u-icon>
              <text class="item-text">金额：¥{{ formatAmount(item.amount) }}</text>
            </view>
            <view class="content-item" v-if="item.paymentAmount > 0">
              <u-icon name="checkmark-circle" size="14" color="#666" class="item-icon"></u-icon>
              <text class="item-text">已缴：¥{{ formatAmount(item.paymentAmount) }}</text>
            </view>
          </view>
          
          <!-- 卡片底部 -->
          <view class="card-footer">
            <view class="progress-info">
              <text class="progress-text">{{ getProgressText(item.paymentStatus) }}</text>
              <view class="progress-bar">
                <view 
                  class="progress-fill"
                  :style="{ 
                    width: getProgressPercentage(item.paymentStatus) + '%',
                    backgroundColor: getStatusColor(item.paymentStatus)
                  }"
                ></view>
              </view>
            </view>
            
            <view class="action-buttons">
              <u-button 
                type="primary" 
                text="详情"
                size="mini"
                @click.stop="goToFeeDetail(item)"
                class="action-btn"
              />
            </view>
          </view>
        </view>
        
        <!-- 空状态 -->
        <view v-if="feesList.length === 0 && !loading" class="empty-state">
          <u-empty 
            text="暂无燃气费记录" 
            icon="fire"
            mode="list"
          />
        </view>
        
        <!-- 加载更多提示 -->
        <view v-if="feesList.length > 0" class="load-more-tip">
          <text v-if="loading" class="tip-text">加载中...</text>
          <text v-else-if="hasMore" class="tip-text">上拉加载更多</text>
          <text v-else class="tip-text">没有更多数据了</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
/**
 * 我的燃气费页面
 * @author Wu.Liang
 * @date 2025-01-21
 * @version 1.0 - 仿照我的物业费页面实现燃气费查询功能
 */

import { ref, reactive, onMounted } from 'vue'
import { gasFeeApi } from '@/api/property'
import { useAuthStore } from '@/store'

// 页面标题
uni.setNavigationBarTitle({
  title: '我的燃气费'
})

// 费用列表数据
const feesList = ref([])

// 分页参数
const pagination = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0
})

// 加载状态
const loading = ref(false)
const refreshing = ref(false)
const hasMore = ref(true)

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    1: '未缴费',
    2: '已缴费',
    3: '已逾期',
    4: '已取消'
  }
  return statusMap[status] || '未知状态'
}

// 获取状态类型
const getStatusType = (status) => {
  const typeMap = {
    1: 'error',
    2: 'success',
    3: 'warning',
    4: 'info'
  }
  return typeMap[status] || 'info'
}

// 获取状态颜色
const getStatusColor = (status) => {
  const colorMap = {
    1: '#ff4757',
    2: '#2ed573',
    3: '#ffa502',
    4: '#747d8c'
  }
  return colorMap[status] || '#747d8c'
}

// 获取进度文本
const getProgressText = (status) => {
  const progressMap = {
    1: '待缴费',
    2: '已缴费',
    3: '已逾期',
    4: '已取消'
  }
  return progressMap[status] || '未知状态'
}

// 获取进度百分比
const getProgressPercentage = (status) => {
  const percentageMap = {
    1: 0,
    2: 100,
    3: 0,
    4: 0
  }
  return percentageMap[status] || 0
}

// 格式化金额
const formatAmount = (amount) => {
  if (!amount) return '0.00'
  return Number(amount).toFixed(2)
}

// 格式化时间
const formatTime = (time) => {
  if (!time) return ''
  const date = new Date(time)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 加载燃气费列表
const loadFeesList = async (isRefresh = false) => {
  if (loading.value) return
  
  try {
    loading.value = true
    
    if (isRefresh) {
      pagination.pageNum = 1
      feesList.value = []
      hasMore.value = true
    }
    
    const authStore = useAuthStore()
    const params = {
      pageNum: pagination.pageNum,
      pageSize: pagination.pageSize,
      userId: authStore.userInfo?.id
    }
    
    const response = await gasFeeApi.getGasFeeList(params)
    
    if (response.code === 200) {
      const { records, total } = response.data
      
      if (isRefresh) {
        feesList.value = records || []
      } else {
        feesList.value.push(...(records || []))
      }
      
      pagination.total = total || 0
      hasMore.value = feesList.value.length < pagination.total
      
      if (!isRefresh) {
        pagination.pageNum++
      }
    } else {
      uni.showToast({
        title: response.message || '加载失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('加载燃气费列表失败:', error)
    uni.showToast({
      title: '加载失败，请重试',
      icon: 'none'
    })
  } finally {
    loading.value = false
    refreshing.value = false
  }
}

// 下拉刷新
const onRefresh = () => {
  refreshing.value = true
  loadFeesList(true)
}

// 加载更多
const loadMore = () => {
  if (hasMore.value && !loading.value) {
    loadFeesList()
  }
}

// 跳转到费用详情
const goToFeeDetail = (item) => {
  uni.navigateTo({
    url: `/pages/property/gas-fee-detail?id=${item.id}`
  })
}

onMounted(() => {
  loadFeesList(true)
})
</script>

<style lang="scss" scoped>
.gas-fees-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.fees-scroll {
  height: 100vh;
}

.fees-content {
  padding: 20rpx;
}

.fee-card {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  }
  
  &:last-child {
    margin-bottom: 0;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .header-left {
    display: flex;
    align-items: center;
    gap: 16rpx;
    
    .fee-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    
    .status-tag {
      flex-shrink: 0;
    }
  }
  
  .fee-time {
    font-size: 24rpx;
    color: #999;
  }
}

.card-content {
  margin-bottom: 20rpx;
  
  .content-item {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 12rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .item-icon {
      flex-shrink: 0;
    }
    
    .item-text {
      font-size: 26rpx;
      color: #666;
      line-height: 1.4;
      word-break: break-all;
    }
  }
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .progress-info {
    flex: 1;
    
    .progress-text {
      display: block;
      font-size: 24rpx;
      color: #666;
      margin-bottom: 8rpx;
    }
    
    .progress-bar {
      width: 100%;
      height: 8rpx;
      background: #f0f0f0;
      border-radius: 4rpx;
      overflow: hidden;
      
      .progress-fill {
        height: 100%;
        border-radius: 4rpx;
        transition: width 0.3s ease;
      }
    }
  }
  
  .action-buttons {
    margin-left: 20rpx;
    
    .action-btn {
      min-width: 120rpx;
    }
  }
}

.empty-state {
  padding: 100rpx 0;
  text-align: center;
}

.load-more-tip {
  padding: 30rpx 0;
  text-align: center;
  
  .tip-text {
    font-size: 24rpx;
    color: #999;
  }
}

/* 响应式适配 */
@media screen and (max-width: 375px) {
  .fees-content {
    padding: 15rpx;
  }
  
  .fee-card {
    padding: 20rpx;
  }
  
  .card-header {
    .header-left {
      .fee-title {
        font-size: 28rpx;
      }
    }
  }
}

@media screen and (min-width: 769px) {
  .gas-fees-page {
    max-width: 800px;
    margin: 0 auto;
  }
}
</style>
